<template>
  <view class="withdraw-record-page" style="background-color: #fff; min-height: 100vh;">

    <!-- 标题栏 -->
      <view style="padding: 10px 20px;text-align: center;">
        <text style="font-size: 18px; font-weight: bold;">提现记录</text>
      </view>
    
	<view style="padding: 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f5f5f5;">
      <!-- 可点击的月份选择按钮 -->
      <picker mode="selector" :range="months" @change="monthChange" range-key="name">
        <view style="display: flex; align-items: center;">
          <text style="font-size: 16px; font-weight: bold;">{{selectedMonth}}</text>
          <view style="width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #666; margin-left: 5px;"></view>
        </view>
      </picker>
      <text style="font-size: 16px; color: #666;">销售额：<text style="color: #000; font-weight: bold;">￥5000.00</text></text>
    </view>

    <!-- 提现记录列表 -->
    <view style="padding: 0 15px;">
      <!-- 第一条记录 -->
      <view style="padding: 15px 0; border-bottom: 1px solid #f5f5f5; display: flex;">
        <!-- 微信图标 -->
        <view style="width: 40px; height: 40px; background-color: #07c160; border-radius: 8px; display: flex; justify-content: center; align-items: center; margin-right: 12px;">
          <text style="color: #fff; font-size: 20px;">微</text>
        </view>
        <view style="flex: 1;">
          <text style="font-size: 16px; display: block; margin-bottom: 5px;">微信钱包</text>
          <text style="font-size: 12px; color: #999; display: block;">2023-10-03 16:10:23</text>
        </view>
        <view style="text-align: right;">
          <text style="font-size: 16px; font-weight: bold; display: block;">123.30</text>
          <text style="font-size: 12px; color: #07c160; display: block;">提现成功</text>
        </view>
      </view>

      <!-- 第二条记录 -->
      <view style="padding: 15px 0; border-bottom: 1px solid #f5f5f5; display: flex;">
        <!-- 微信图标 -->
        <view style="width: 40px; height: 40px; background-color: #07c160; border-radius: 8px; display: flex; justify-content: center; align-items: center; margin-right: 12px;">
          <text style="color: #fff; font-size: 20px;">微</text>
        </view>
        <view style="flex: 1;">
          <text style="font-size: 16px; display: block; margin-bottom: 5px;">微信钱包</text>
          <text style="font-size: 12px; color: #999; display: block;">2023-10-02</text>
        </view>
        <view style="text-align: right;">
          <text style="font-size: 16px; font-weight: bold; display: block;">123.30</text>
          <text style="font-size: 12px; color: #ff9900; display: block;">待审核</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      months: [
        '1月', '2月', '3月', '4月', '5月', '6月',
        '7月', '8月', '9月', '10月', '11月', '12月'
      ],
      selectedMonth: '10月'
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
	monthChange(e) {
      this.selectedMonth = this.months[e.detail.value]
      // 这里可以添加加载对应月份数据的逻辑
      console.log('选择月份:', this.selectedMonth)
    }
  }
}
</script>

<style>
.withdraw-record-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 
              Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
</style>